// 配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter)
// 引入store
import store from '@/store'
//引入一级路由组件
// import Home from "@/pages/Home"
import Search from "@/pages/Search"
import Login from "@/pages/Login"
import Register from "@/pages/Register"
import Detail from "@/pages/Detail"
import AddCartSuccess from "@/pages/AddCartSuccess"
import ShopCart from "@/pages/ShopCart"
import Trade from '@/pages/Trade'
import Pay from '@/pages/Pay'
import PaySuccess from '@/pages/PaySuccess'
import Center from '@/pages/Center'
// 引入二级路由组件
import MyOrder from '@/pages/Center/MyOrder'
import GroupOrder from '@/pages/Center/GroupOrder'

// 路由懒加载
/*
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
*/

//解决数据传参，多次点击报错的问题：
// 1.先把VueRouter原型对象的push和replace，先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
// 2.重写push|replace
    // 第一个参数：跳转的路由
    // 第二个参数：成功回调
    // 第三个参数：失败回调
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        //call与apple区别
        // 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
        // 不同点：call与apple传递参数，call传递参数用逗号隔开，apple方法执行，传递数组
        originPush.call(this, location, resolve, reject)
    } else {
        originPush.call(this, location, () => {}, () => {})
    }
}
VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        //call与apple区别
        // 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
        // 不同点：call与apple传递参数，call传递参数用逗号隔开，apple方法执行，传递数组
        originReplace.call(this, location, resolve, reject)
    } else {
        originReplace.call(this, location, () => {}, () => {})
    }
}

// 配置路由
let router = new VueRouter({
    // 配置路由
    routes: [
        {
            path: '/center',
            component: Center,
            meta: { show: true },
            // 二级路由组件
            children: [
                {
                    path: 'myorder',
                    component:MyOrder
                },
                {
                    path: 'grouporder',
                    component:GroupOrder
                },
                {
                    path: '/center',
                    redirect:'/center/myorder'
                }
            ]
        },
        {
            path: '/paysuccess',
            component: PaySuccess,
            meta:{show:true}
        },
        {
            path: '/pay',
            component: Pay,
            meta: { show: true },
            beforeEnter: (to, from, next) => {
                if (from.path == '/trade') {
                    next()
                } else {
                    next(false)
                }
            }
        },
        {
            path: '/trade',
            component: Trade,
            meta: { show: true },
            // 路由独享守卫
            beforeEnter: (to, from, next) => {
                // 去交易页面,必须是从购物车而来
                if (from.path == "/shopcart") {
                    next()
                } else {
                // 如果不是,则调到当前
                    next(false)
                }
            }
        },
        {
            path: '/home',
            // 路由懒加载
            component: () => import('@/pages/Home'),
            meta:{show:true}
        },
        {
            path: '/shopcart',
            component: ShopCart,
            meta:{show:true}
        },
        {
            path: '/detail/:skuId',
            component: Detail,
            meta: { show: true },
            name:'detail'
        },
        {
            path: '/addcartsuccess',
            name:'addcartsuccess',
            component: AddCartSuccess,
            meta:{show:true}
        },
        {
            path: '/search/:keyword?/',
            component: Search,
            meta: { show: true },
            name:'search'
        }, 
        {
            path: '/login',
            component: Login,
            meta:{show:false}
        },
        {
            path: '/register',
            component: Register,
            meta:{show:false}
        },
        // 重定向，在项目跑起来的时候，立马定向到首页
        {
            path: '*',
            redirect:'/home'
        }
    ],
    // 滚动信息
    scrollBehavior (to, from, savedPosition) {
        return { y: 0 }
      }
})

// 全局守卫：前置守卫（在路由跳转之间进行判断）
router.beforeEach(async (to, from, next) => {
    // to：可以获取到你要跳转的那个路由信息
    // from：可以获取到你从哪个路由而来的信息
    // next：放行函数  next()放行  next(path)放行到指定路由
    // 为了测试，先全都放行
    // next()
    // console.log(store);
    // 用户登录了，才会有token，未登录一定不会有token
    let token = store.state.user.token
    let name = store.state.user.userInfo.name
    // 判断
    if (token) {
        // 用户已经登陆了，如果去的是登录页面，跳转到home页面去
        if (to.path == '/login') {
            // 不能去login页面
            next('/home')
        } else {
            // 登录了，去的不是登录页面（放行）
            // 如果用户名已有
            if (name) {
                next()
            } else {
                // 没有用户信息，派发action让仓库存储用户信息再跳转
                try {
                    // 获取用户信息成功
                    await store.dispatch('getUserInfo')
                    // 放行
                    next()
                } catch (error) {
                    // token失效了,获取不到用户的信息,重新登录
                    // 清除token
                    await store.dispatch('userLoginOut')
                    next('/login')
                }
            }
        }
    } else {
        // 未登录不能访问:交易页面(trade),支付相关(pay,paysuccess),支付中心(center) 直接跳转到 登录页面
        let toPath = to.path
        if (toPath.indexOf('/trade') != -1 || toPath.indexOf('/pay') != -1 || toPath.indexOf('/center') != -1) {
            // 把未去成的参数存到路径当中
            next('/login?redirect='+toPath)
        } else {
            //去的不是上面的这些路由则放行
            next()
        }
    }
})

// 暴露router
export default router